  <template>
    <div style="padding:20px">
      <el-table :data="tableData.slice((currpage-1)*pagesize,currpage*pagesize)" style="width: 100%"
        :show-header="false" size="small" >
        <!-- 用户头像显示 -->
        <el-table-column label="用户头像" width="120">
          <template slot-scope="scope">
            <div style="text-align:center">
              <img :src="scope.row.avatar" style="width:48px;height:48px; border-radius:50%;">
            </div>
          </template>
        </el-table-column>
        <!-- 用户部门姓名显示 -->
        <el-table-column label="用户部门姓名" width="180">
          <template slot-scope="scope">
            <div style="font-weight:bold;color:black; font-size:16px;">
              &emsp;
              <span>{{scope.row.userName}}</span>
            </div>
            <div  style="text-align:center;font-size:15px;">{{scope.row.type}}了你的文档</div>
          </template>
        </el-table-column>
        <!-- 点赞收藏显示 -->
        <el-table-column label="点赞收藏" width="150">
          <template slot-scope="scope">
            <div style="text-align:center" v-if="scope.row.type==='点赞'"><img src="@/assets/image/myself/u905.png"
                style="width:40px;height:40px;">
            </div>
            <div style="text-align:center" v-if="scope.row.type==='收藏'"><img src="@/assets/image//myself/u198.png"
                style="width:40px;height:40px;">
            </div>
            <div style="text-align:center" v-if="scope.row.type==='下载'"><img src="@/assets/image//myself/u1124.png"
                style="width:40px;height:40px;">
            </div>
          </template>
        </el-table-column>
        <!--文档显示显示 -->
        <el-table-column label="文件名" width="180"  >
          <template slot-scope="scope">
            <span @click="filePreview(scope.row.targetId)"
              style="font-weight:bold;color:black; font-size:14px; white-space: nowrap;text-overflow: ellipsis;cursor:pointer;">&laquo;{{scope.row.content}}&raquo;</span>
          </template>
        </el-table-column>
        <!--日期显示  -->
        <el-table-column label="日期" width="170">
          <template slot-scope="scope">
            <div style="font-size:15px;">{{scope.row.time}}</div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="block">
        <el-pagination :current-page="currpage" @current-change="handleCurrentChange" :page-size="pagesize"
          layout="prev, pager, next" :total="tableData.length" style="float:right;bottom:0;">
        </el-pagination>
      </div>
    </div>
  </template>
  <script>
    import { getMyselfMessage } from "@/api/myself/myself";
    export default {
      data() {
        return {
          currpage: 1,
          pagesize: 7,
          userId: this.$store.getters.userId,
          // 此为测试数据，具体数据得根据服务器传参
          tableData: [{
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            deptName: 'XX事业部门',
            userName: '张三',
            flag: 0, // 点赞
            fileName: '好好学习天天向上',
            fileId: 1,
            time: '2010-10-14'
          }, {
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            deptName: 'XX事业部门',
            userName: '张三',
            flag: 1, // 点赞
            fileName: '学了也咩用，还不如摆烂',
            fileId: 255,
            time: '2010-10-14'
          }]
        }
      },
      methods: {
        handleCurrentChange(val) {
          this.currpage = val;
        },
        //跳转详情页
        filePreview(fileId) {
          this.$router.push({
            path:'/docdetail',
            query: {
              id: fileId
            }
          })
        }
      },
      created() {
        let data = {
          userId: this.userId
        }
        console.log(data)
        getMyselfMessage(data)
          .then((res) => {
            console.log(res);
            this.tableData = [];
            for (let i in res.data) {
              this.tableData.push(res.data[i]);
            }
            for (let j in this.tableData) {
              this.tableData[j].avatar = 'data:image/png;base64,' + this.tableData[j].avatar;
            }
            console.log(this.tableData)
          }).catch((err) => {
            console.log(err);
          })
      }
    }
  </script>